$foreColorLight: #200E71;
$bgColorLight: #DCE4BA;
$borderColorLight: #DCC241;

$foreColorDark: #FFFFFF;
$bgColorDark: #6D7597;
$borderColorDark: #525F97;

.mpEditor {
  font-size: 14px;
  width: 310px;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  padding: 5px;
}

.mpEditorLight {
  color: $foreColorLight;
  background-color: $bgColorLight;
  border-color: $borderColorLight;
}

.mpEditorDark {
  color: $foreColorDark;
  background-color: $bgColorDark;
  border-color: $borderColorDark;
}

.mpEditor.mpDisplay {
  width: auto;
  border: none;
  background-color: transparent;
  padding: 0 0 2px 0;
}

.mpEditorToolbarButton {
  display: inline-block;
  max-height: 12px;
  position: relative;
  padding: 3px;
  margin: 0 1px;
  border-radius: 2px;
  text-align: center;

  img {
    vertical-align: top;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  &:active {
    background-color: rgba(0, 0, 0, 0.2);
  }
}

.mpEditorToolbarSubmenuExp {
  position: absolute;
  display: inline-flex;
  top: 16px;
  left: 0;
  border-radius: 2px;
  box-shadow: 0 1px 2px #222222;
  outline: none;
  z-index: 2;
}

.mpEditorLight .mpEditorToolbarSubmenuExp {
  background-color: $bgColorLight;
}
.mpEditorDark .mpEditorToolbarSubmenuExp {
  background-color: $bgColorDark;
}

.mpEditorToolbarSeparator {
  display: inline-block;
  height: 14px;
  width: 0px;
  margin: 0 2px;
  background-color: #AAAAAA;
}

.mpEditor.mpEditorShowToolbarTop {
  .mpEditorWrapper {
    padding-top: 4px;
  }

  &.mpEditorLight .mpEditorWrapper {
    border-top: 1px solid #999999;
  }

  &.mpEditorDark .mpEditorWrapper {
    border-top: 1px solid #444444;
  }
}

.mpEditor.mpEditorShowToolbarBottom {
  .mpEditorWrapper {
    padding-bottom: 4px;
  }

  &.mpEditorLight .mpEditorWrapper {
    border-bottom: 1px solid #999999;
  }

  &.mpEditorDark .mpEditorWrapper {
    border-bottom: 1px solid #444444;
  }
}

.mpImageTextWrapper, .mpImageTextWrapper span {
  color: transparent !important;
}

.mpImage {
  display: inline-block;
  width: 14px;
  background-repeat: no-repeat;
  background-position: center;

  &::selection, ::selection {
    color: transparent;
    background-color: rgba(76, 103, 154, 0.8);
  }
  &::-moz-selection, ::-moz-selection {
    color: transparent;
    background-color: rgba(76, 103, 154, 0.8);
  }
}
.mpImageKey-A {
  background-image: url("../img/richtext/A.png");
}
.mpImageKey-B {
  background-image: url("../img/richtext/B.png");
}
.mpImageKey-S {
  background-image: url("../img/richtext/S.png");
}
.mpImageKey-Z {
  background-image: url("../img/richtext/Z.png");
}
.mpImageKey-CUP {
  background-image: url("../img/richtext/Cup.png");
}
.mpImageKey-CDOWN {
  background-image: url("../img/richtext/Cdown.png");
}
.mpImageKey-CLEFT {
  background-image: url("../img/richtext/Cleft.png");
}
.mpImageKey-CRIGHT {
  background-image: url("../img/richtext/Cright.png");
}
.mpImageKey-R {
  background-image: url("../img/richtext/R.png");
}
.mpImageKey-ANALOG {
  background-image: url("../img/richtext/analog.png");
}
.mpImageKey-COIN {
  background-image: url("../img/richtext/coin.png");
}
.mpImageKey-STAR {
  background-image: url("../img/richtext/star.png");
}
.mpImageKey-PAUSE {
  background-image: url("../img/richtext/pause.png");
}
.mpImageKey-FEED {
  background-image: url("../img/richtext/feed.png");
  width: 22px;
}
